﻿<!DOCTYPE HTML>
<html lang="en-US">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0 minimal-ui"/>
	<meta name="apple-mobile-web-app-capable" content="yes"/>
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<title>生命周期</title>
	<script type="text/javascript" src="js/vue2.js"></script>
	<script type="text/javascript">
		var Home={
			template:"#sss"
		}
		Vue.component("aaa",Home);  //==extend 但2.0已经不再用extend
		
		var B={
			template:"#mmm"
		}
		window.onload = function(){
			var vm = new Vue({
					el:"#box",
					data:{
						txt:"hello"
					},
					components:{  //2.0写法直接是一个对象home B
						"nnn":B
					},
					beforeCreate:function(){
						//alert("实力刚刚创建"); 
					},
					created:function(){
						//alert("实力创建完成"); 
					},
					beforeMount:function(){    //老版本是beforeCompile
						//alert("插入前");
					},
					mounted:function(){         //老版本是compiled
						//alert("插入后");
					},
					beforeUpdate:function(){
						//alert("更新前");
					},
					updated:function(){
						//alert("已更新");
					},
					beforeDestroy:function(){
						//alert("销毁前");
					},
					destroyed:function(){
						//alert("已销毁");
					}
			});
			/*document.onclick=function(){
				vm.$destroy();
			}*/
			
			<!-- 计算属性方法 -->
			var vm1 = new Vue({
					el:"#box1",
					aa:function(){
						alert(2);
					},
					data:{
						a:1
					},
					computed:{
						/*b:function(){ //这样写相当于get函数
							return this.a+1;
						}*/      
						b:{         //setter：设置值时触发。getter：获取值时触发，与setter是没有必然联系的。computed一般用法是改变data里面的值，作为自己的值。
							get:function(){
								return this.a+1;
							},
							set:function(val){
								this.a=val;
							}
						}
					}
			});
			document.onclick=function(){
				vm1.b=10;
			}
		//	console.log(vm1.$data.a);  //$data就是data
		//vm1.$options.aa();  调用自定义的方法属性用$options
		var vm2=new Vue({
			data:{
				c:3,
				d:4
			}
		}).$mount("#box2");  //手动绑定到box2上
		//console.log(vm2.$data);
		
		var vm3=new Vue({
			el:".box3",
			data:{
				arr:[1,2,3,4]
			},
			methods:{
				add:function(){
					this.arr.push("apple");
				}
			}
		});
	}
	
	</script>
</head>
<body>

	<template id="sss">
		<h3>gggggg</h3>
	</template>
	<template id="mmm">
		<strong>dffff</strong>
	</template>
	<div id="box">
	<aaa></aaa>
	<nnn></nnn>
		{{txt}}
	</div>
	<input type="button" value="按钮" />
	
	<div id="box1">
		a => {{a}}
		<br />
		b => {{b}}
	</div>
	<div id="box2">
		{{c}}
	</div>
	<div class="box3">
		<input type="button" value="添加" @click="add()"/>  <!--在低版本 只能添加一次 解决办法 加一个track-by=“索引” 新版本默认可以重复增加,用bind绑定只是为了提高性能 v-bind:key="index" ==  :key="index"-->
		<ul>
			<li v-for="(val, index) in arr"  track-by="index" v-bind:key="index">{{val}}</li>
		</ul>
	</div>
</body>
</html>